<template>
    <div class="xuanfu">
        <img class="kefu1" :src="kefu.img" @click="toggle"/>
        <div class="popup" :id="'popup'" v-show="showPopup">
            <div class="popz" @click="toggle3"></div>
            <div class="popc">
                <div class="bgone">
                    <span>代理加盟</span>
                </div>
                <img class="qw" :src="kefu.qr"/>
                <span class="qw2"></span>
                <div class="pp">长按二维码添加，耐心等待通过...</div>
                <img class="close" src="@/assets/group/close.png" @click="toggle2"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FloatKefu',
    props: {
        kefu: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            showPopup: false
        }
    },
    methods: {
        toggle() {
            this.showPopup = !this.showPopup
        },
        toggle2() {
            this.showPopup = false
        },
        toggle3() {
            this.showPopup = false
        }
    }
}
</script>

<style scoped>
.xuanfu {
    position: fixed;
    display: flex;
    flex-direction: column;
    bottom: 20%;
    right: 2%;
}

.kefu1 {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 320px;
    height: 100%;
}

.popup[style*="display: block"], .popup[style*="display: inline"] {
    display: block !important;
}

.popz {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 320px;
    height: 100%;
    background-color: rgba(88, 87, 86, 0.5);
}

.popc {
    width: 70%;
    height: auto;
    position: absolute;
    left: 15%;
    top: 15%;
    border-radius: 1rem;
    background-color: #fff;
}

.bgone {
    width: 100%;
    height: 6.3rem;
    background-color: #ff2742;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bgone span {
    color: #fff;
    font-size: 1.5rem;
}

.qw {
    width: 10rem;
    height: 10rem;
    margin: 1.5rem auto 0 auto;
    display: block;
}

.pp {
    width: 85%;
    margin: 1.1rem auto;
    text-align: left;
    color: #1b1b1b;
    white-space: pre-wrap;
    line-height: 1.3rem;
    font-size: 0.9rem;
}

.close {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
    width: 2.4rem;
    height: 2.4rem;}
</style>
